<?php echo $javascript->link("wz_dragdrop.js"); ?>
<?php echo $javascript->link("Pos_func.js"); ?>

<div id="milestones" class="milestones">
<?php
$i = 0;
foreach($Milestones as $ms):?>
	<div id="<?php echo "ms".$ms['Milestone']['id']; ?>" style="position:relative; left: 0px; height: 20px; width: 400px; border-width:1px; border-style:solid; border-color:black;">
		<FORM METHOD="POST" ACTION="exemple.cgi" >
		<?php echo $html->image('img_js/drag.jpg', array('alt'=>"d&d", 'border'=>"0")); ?>
		<INPUT NAME="cbox" TYPE="checkbox">
		<?php echo $ms['Milestone']['name']; ?>
		<INPUT NAME="date" TYPE=text VALUE="<?php echo $ms['Milestone']['deadline']; ?>" disabled >
		</FORM>
	</div>
<?php
$i++;
endforeach;
?>
</div>

<script type="text/javascript">

SET_DHTML(CURSOR_MOVE, <?php
	$i = 0;
	foreach($Milestones as $ms):
		if ($i == sizeof($ms) - 1)
			echo '"ms'.$ms['Milestone']['id'].'"';
		else
			echo '"ms'.$ms['Milestone']['id'].'", ';
	$i++;
	endforeach;
?>);

// Array intended to reflect the order of the draggable items
var aElts = [<?php
	$i = 0;
	foreach($Milestones as $ms):
		if ($i == sizeof($ms) - 1)
			echo 'dd.elements.ms'.$ms['Milestone']['id'];
		else
			echo 'dd.elements.ms'.$ms['Milestone']['id'].', ';
	$i++;
	endforeach;
?>];

var margTop = getOffsetPosition('milestones', 'Top');
var dx = getOffsetPosition('milestones', 'Left');
var curms = 0;
var dy      = 20;
var yOld;

function my_PickFunc()
{
    // Store position of the item about to be dragged
    // so we can interchange positions of items when the drag operation ends
    yOld = dd.obj.y;
}

function my_DropFunc()
{

    // Calculate the snap position which is closest to the drop coordinates
    var y = dd.obj.y ;//- dy/2;
	
	y = Math.max(margTop, Math.min(y - (y-margTop)%dy, margTop + (aElts.length-1)*dy));
	
    // Index of the new position within the spatial order of all items
    var i = (y-margTop)/dy;
	
    // Interchange the positions of the two items  
    aElts[i].moveTo(dx, yOld);
    
    // Let the dropped item snap to position
    dd.obj.moveTo(dx, y);
    
    // Update the array according to the changed succession of items
    aElts[(yOld-margTop)/dy] = aElts[i];
    
	aElts[i] = dd.obj;
}

</script>